<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
	</head>
	<body>
		<header id="panel_header" class="aui-bar aui-bar-nav aui-bar-pro">
			<a onclick="systemBack();" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<span onclick="change(this);" class="aui-title">头部下拉菜单<span class="aui-iconfont aui-icon-unfold aui-text-warning" style="padding-left:3px;"></span></span>
			<a onclick="more();" class="aui-pull-right"> <span class="aui-iconfont aui-icon-moreandroid"></span> </a>
		</header>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/aui-eg.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var header = $api.byId('panel_header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			api.openFrame({
				name : 'main',
				url : 'modal_header_frm.html',
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : "auto",
					h : api.winHeight - headerPos.h
				}
			});
			api.parseTapmode();
		};
		function systemBack() {
			api.closeWin();
		}
		
		function more(){
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			$aui.topMenu({
				modalOpacity : "0.4",
				x : api.winWidth - 120,
				y : headerPos.h,
				w : 120,
				h : 200,
				point : "off",
				pointX : 90,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(0,0,0,1.0)",
				menuRadius : "0",
				textColor : "#ffffff",
				activeColor : "#ffa604",
				activeBgColor : "#7a7a7a",
				textAlign : "center",
				textSize : 16,
				textData : [
					"编辑","删除","分享"
				],
				lineColor : "#4c4c4c",
				textDefault : ""
			}, function(index) {
				if(index != "-1"){
					alert(index);
				}
			});
		}
		
		function change(obj) {
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			$api.removeCls($api.dom(obj, "span"), "aui-icon-unfold");
			$api.addCls($api.dom(obj, "span"), "aui-icon-fold");
			$aui.topMenu({
				modalOpacity : "0.0",
				x : api.winWidth/2 - 80,
				y : headerPos.h,
				w : 150,
				h : 200,
				point : "on",
				pointX : 65,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(0,0,0,0.7)",
				menuRadius : "5",
				textColor : "#ffffff",
				activeColor : "#ffa604",
				activeBgColor : "#7a7a7a",
				textAlign : "left",
				textSize : 16,
				textData : [
					"首页","好友圈","群微博","我的微博","-","特别关注","名人明星","同事","同学"
				],
				lineColor : "#4c4c4c",
				textDefault : "首页"
			}, function(index) {
				if(index != "-1"){
					alert(index);
				}
				$api.removeCls($api.dom(obj, "span"), "aui-icon-fold");
				$api.addCls($api.dom(obj, "span"), "aui-icon-unfold");
			});
		}
	</script>
</html>